<template>
  	<div id="addAddress">
  		<header>
  			<i @click="goBack()"></i>
  			<div>添加收货地址</div>
  		</header>
  		<div class="border-8"></div>
    	<ul class="">
	  		<li>
	  			<a>
					收货人:
		 			<input type="text" v-model="addAddress.name" placeholder="请填写收货人姓名"  required maxlength="5"/>
	  			</a>
	  		</li>
	  		<li>
	  			<a>
					手机号:
		 			<input type="text" v-model='addAddress.phone' placeholder="请填写手机号"  required maxlength="11"/>
	  			</a>
	  		</li>
	  		<li>
	  			<a @click="show=true">
					配送地址:
		 			<input type="text" onfocus="this.blur();" placeholder="点击选择配送区域" v-model='addAddress.selectCity' required />
	  			</a>
	  		</li>
	  		<li>
	  			<a>
					详细地址:
		 			<input type="text" v-model='addAddress.detailAddress' placeholder="填写收货人详细地址"  required maxlength="60"/>
	  			</a>
	  		</li>
	  	</ul>
	    <a class="confirmBtn" @click="save">
	  		确认提交
	  	</a>
	  	<vue-area :props-show="show" :props-result="result" v-on:result="areaResult"></vue-area>
	</div>
</template>
<script>
	import vueArea from 'vue-area'
	export default {
		data() {
			return {
				show: false, //三级联动
				result: { //有用
					province: {
						name: ''
					},
					city: {
						name: ''
					},
					area: {
						name: ''
					}
				},
				province: '', //省
				city: '', //市
				area: '', //区

				addAddress: {
					name: '',
					phone: '',
					selectCity: '',
					detailAddress: '',
				},
			}
		},
		components: {
			vueArea,
		},
		methods: {
			goBack() {
				this.$router.back();
			},
		    //选择地区回调
			areaResult(show, result) {
				this.show = show;
				this.result = result;
				this.province = result.province.name;
				if(result.city.name == '市辖区' || result.city.name == '县'){
					this.city = "";
				}else{
					this.city = result.city.name;
				}
				this.area = result.area.name;
				this.addAddress.selectCity = this.province + this.city + this.area;
			},
			save() {
				var reg_phone = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
				if(!this.addAddress.name) {
					this.$utils._toast("请输入联系人姓名")
					return false;
				}else if(!this.addAddress.phone) {
					this.$utils._toast("手机号不能为空")
					return false;
				} else if(!reg_phone.test(this.addAddress.phone)) {
					this.$utils._toast("请输入正确手机号")
					return false;
				} else if(!this.addAddress.selectCity) {
					this.$utils._toast("请选择所在地区")
					return false;
				}else if(!this.addAddress.detailAddress) {
					this.$utils._toast("请输入详细地址")
					return false;
				}else {
					const params = {
						user_id: localStorage.getItem("loginMobile"),
                        content: JSON.stringify(this.addAddress),
                        type: 'address'
					};
					console.log(params);
					this.$api.post(this.$api.baseURLSchool,"dataupdate/user_relative/add",params,r => {
						console.log(r);
						this.$router.back();
					},err => {
						console.log(err);
					})
				}
			},
		},
		created() {

		},
		mounted() {
		}
	}
</script>
<style lang="scss">
</style>
